import 'package:flutter/material.dart';
import 'package:flutter_scaffold/flutter_scaffold.dart';

class TabBarDemoPage extends StatefulWidget {
  const TabBarDemoPage({super.key});

  @override
  State<TabBarDemoPage> createState() => _TabBarDemoPageState();
}

class _TabBarDemoPageState extends State<TabBarDemoPage> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("tabBar"),
        bottom: TabBar(
          controller: TabController(length: 3, vsync: this),
          tabs: [Tab(text: 'Home'), Tab(text: 'Search'), Tab(text: 'Profile')],
        ),
      ),
      body: Column(
        children: [
          TabBar(
            isScrollable: true,
            tabAlignment: TabAlignment.start,
            controller: TabController(length: 10, vsync: this),
            indicator: TopTabIndicator(),
            tabs: [
              Tab(text: 'Home'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Profile'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
            ],
          ).marginOnly(top: 40.w),

          TabBar(
            isScrollable: true,
            tabAlignment: TabAlignment.start,
            controller: TabController(length: 10, vsync: this),
            indicator: TopTab2Indicator(),
            tabs: [
              Tab(text: 'Home'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Profile'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
              Tab(text: 'Search'),
            ],
          ).marginOnly(top: 40.w),
        ],
      ),
    );
  }
}

class TopTabIndicator extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _TopTabIndicatorPainter();
  }
}

class _TopTabIndicatorPainter extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Paint paint =
        Paint()
          ..color = Colors.blue
          ..strokeCap = StrokeCap.round
          ..strokeWidth = 8.w
          ..style = PaintingStyle.fill;

    // 在顶部绘制指示线
    final double width = configuration.size!.width;
    // 顶部线条
    canvas.drawLine(offset, offset + Offset(width, 0), paint);
  }
}

class TopTab2Indicator extends Decoration {
  final Color color;
  final double indicatorHeight;
  final double borderRadius;

  const TopTab2Indicator({this.color = Colors.blue, this.indicatorHeight = 3.0, this.borderRadius = 2.0});

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _TopTab2IndicatorPainter(color: color, indicatorHeight: indicatorHeight, borderRadius: borderRadius);
  }
}

class _TopTab2IndicatorPainter extends BoxPainter {
  final Color color;
  final double indicatorHeight;
  final double borderRadius;

  _TopTab2IndicatorPainter({required this.color, required this.indicatorHeight, required this.borderRadius});

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Paint paint =
        Paint()
          ..color = color
          ..style = PaintingStyle.fill;

    final double width = configuration.size!.width;

    // 创建圆角矩形
    final Rect rect = Rect.fromLTWH(offset.dx, offset.dy, width, indicatorHeight);

    final RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(borderRadius));

    // 控制四个角的弧度
    // final RRect rrect = RRect.fromRectAndCorners(
    //   rect,
    //   topLeft: Radius.circular(borderRadius),
    //   topRight: Radius.circular(borderRadius),
    // );

    // 绘制圆角矩形
    canvas.drawRRect(rrect, paint);
  }
}
